<script setup>
import {onMounted, getCurrentInstance, ref, defineEmits, reactive,watch} from "vue";
import {deleteSystemById, systemPage} from '@/api/basal.js'
import Pagination from "@/components/debris/Pagination.vue";
import {ResultEnums} from "@/enums/ResultStatusEnums.js";
import Dialog from "@/components/debris/Dialog.vue";
const emit = defineEmits(['innerLink'])
const {proxy} = getCurrentInstance();
const total = ref(0)
const keyword = ref('')
const currentSystem = ref(import.meta.env.VITE_SYSTEM_CODE)
const query = reactive({pageNo:1,pageSize:10})
const rows = ref([])
onMounted(() => {
  onLoadData(query)
})

watch(query,(newParams) => {
  onLoadData(newParams)
})

function onLoadData(param){
  systemPage(param).then(result => {
    if(result.code === ResultEnums.SUCCESS ){
      let data = result.data
      total.value = data.total
      rows.value = data.records
    }
  })
}

function innerLink(e,url,params){
  e.preventDefault();
  emit('innerLink',url,params)
}

function searchClick(e){
  e.preventDefault();
  query.keyword = keyword.value
}

function deleteById(id){
  deleteSystemById(id).then(result => {
    if(result.code === ResultEnums.SUCCESS ){
      window.location.reload();
    }
  })
}

</script>

<template>
  <div class="row g-3 mb-4 align-items-center justify-content-between">
    <div class="col-auto" v-if="proxy.$route.meta">
      <h1 class="app-page-title mb-0">{{ proxy.$route.meta.theme }}</h1>
    </div>
    <div class="col-auto">
      <div class="page-utilities">
        <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
          <div class="col-auto">
            <form class="table-search-form row gx-1 align-items-center">
              <div class="col-auto">
                <input type="text" id="search-orders" name="searchorders" class="form-control search-orders" v-model="keyword"
                       placeholder="请输入系统名称" />
              </div>
              <div class="col-auto">
                <button type="submit" class="btn app-btn-secondary" @click="searchClick">查询</button>
              </div>
            </form>
          </div>
        </div><!--//row-->
      </div><!--//table-utilities-->
    </div><!--//col-auto-->
  </div><!--//row-->
  <div class="table-responsive">
    <table class="table app-table-hover mb-0 text-left">
      <thead>
      <tr>
        <th class="cell"></th>
        <th class="cell">系统名称</th>
        <th class="cell">系统编码</th>
        <th class="cell">系统描述</th>
        <th class="cell">页脚信息</th>
        <th class="cell">最近操作时间</th>
        <th class="cell">状态</th>
        <th class="cell">
          <button type="button" class="btn btn-secondary btn-sm" @click="innerLink($event,`/home/system/edit`,{})" >新建</button>
        </th>
      </tr>
      </thead>
      <tbody v-if="rows">
      <tr v-for="row in rows">
        <td class="cell">
          <div class="app-branding" v-if="row.systemIcon">
            <a class="app-logo">
              <img class="logo-icon me-2" :src="row.systemIcon" alt="logo" >
            </a>
          </div>
        </td>
        <td class="cell">{{row.systemName}}</td>
        <td class="cell">{{row.systemCode}}</td>
        <td class="cell">{{row.systemDescribed}}</td>
        <td class="cell" v-html="row.systemFooter"></td>
        <td class="cell">
          {{ row.updateTime ? new Date(row.updateTime).toLocaleDateString() : row.updateTime}}
        </td>
        <td class="cell">
          <template v-if="row.isEnable">
            <span class='badge bg-success'>启用</span>
          </template>
          <template>
            <span class='badge bg-warning'>弃用</span>
          </template>
        </td>
        <td class="cell">
          <button type="button" class="btn btn-outline-primary btn-sm" @click="innerLink($event,`/home/system/edit`,{id:row.id})" >编辑</button>
          <template v-if="currentSystem !== row.systemCode">
            <button type="button" class="btn btn-outline-light btn-sm" data-bs-toggle="modal" :data-bs-target="`#dialog-${row.id}`" >删除</button>
            <Dialog theme="账号删除请求" :content="`您确定删除 “${row.systemName}” 吗？`" :row="row" @confirm="(r)=>{deleteById(r.id)}"
                    :id="`dialog-${row.id}`" :primary="`${row.id}`"/>
          </template>
        </td>
      </tr>
      </tbody>
    </table>
  </div><!--//table-responsive-->
  <br/>
  <Pagination :page-size=query.pageSize :total=total :span=2
              @current-change="(num)=>{query.pageNo=num}"/><!--//app-pagination-->
</template>